<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../vue.js" charset="utf-8"></script>
</head>

<body>
    <div id="demo">
        父组件{{config}}
        <br/>
        <componet-a :config="config" v-model="message" @eventa="eventA"></componet-a>
    </div>
</body>
<script type="text/javascript">
    Vue.prototype.$bus = new Vue();
    var CompontA = {
        props: ['config'],
        data() {
            return {}
        },
        render: function (_c, context) {
            return _c('a', {
                attrs: {
                    href: 'javascript:;'
                },
                on: {
                    click: this.change
                },
            }, [this._v('子组件')]);
        },
        methods: {
            change() {
                this.config.a = 1;
                this.$bus.$emit('abc');
                this.$emit('eventa','asdf');
            }
        }
    };
    var vm = new Vue({
        el: "#demo",
        data: {
            message: ''
        },
        methods: {
            eventA(a){
                console.log(a);
            }
        },
        created() {
            this.config =  {a: [1,2], b: 'b'};
            this.$bus.$on('abc', () => {
                console.log('props has changed!', this.config);
            })
        },
        components: {
            'componet-a': CompontA
        }
    });
</script>

</html>